<template>
	<view>
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">未领取红包回滚</block>
		</cu-custom>
		<!-- <view class="search bg-white m-all20 border-radius">
				<view class="icon cuIcon-search mt20 mb20 ml20"></view>
				<view class="input mt20 mb20">
					<input v-model="phone" clear :maxlength="11" type="text" placeholder="请输入手机号" />
				</view>
				<view class="btn" @tap.stop="search">搜索</view>
			</view> -->
		<view>
			<view class="cu-list">
				<view
					class="cu-item m-all20 p-all24 bg-white border-radius"
					v-for="(item, index) in tableData"
					:key="index">
					<view class="f36">
						<text>直播间:</text>
						<text>{{ item.liveName }}</text>
					</view>
					<view class="flex justify-between f32 pl20 pr20 mt20">
						<view class="flex1">
							<text>红包金额/人:</text>
							<text class="ml10 text-price text-red">{{ item.rewardNum }}</text>
						</view>
						<view class="flex1">
							<text>红包数量:</text>
							<text class="ml10">{{ item.getUserNo }}</text>
						</view>
					</view>
					<view class="flex align-center f32 pl20 pr20 mt20">
						<view class="flex1">
							<text>红包总金额:</text>
							<text class="ml10 text-price text-red">{{ item.totalMoney }}</text>
						</view>
						<view class="flex1">
							<text>已领取人数:</text>
							<text class="ml10">{{ item.getUserNoOk }}</text>
						</view>
					</view>
					<view class="flex justify-between f32 pl20 pr20 mt20">
						<view class="flex1">
							<text>未领取人数:</text>
							<text class="ml10">{{ item.getUserNoNo }}</text>
						</view>
						<view class="flex1">
							<text>剩余金额:</text>
							<text class="ml10 text-price text-red">{{ item.getMoney }}</text>
						</view>
					</view>
					<view class="mt20 text-right">
						<button class="cu-btn bg-red" @tap.stop="rollback(item.liveId)">回滚</button>
					</view>
				</view>
			</view>
			<view :class="'cu-load bg-gray ' + (loadmore ? 'loading' : 'over')"></view>
		</view>
	</view>
</template>
<script>
const app = getApp();
import util from "utils/util";
import api from "utils/api";
export default {
	data() {
		return {
			theme: app.globalData.theme,
			page: {
				size: 10,
				current: 1,
			},
			phone: "",
			tableData: [],
			loadmore: false,
			liveId: "",
		};
	},
	onLoad(options) {
		this.tableData = [];
		this.getTableData();
	},
	methods: {
		getTableData() {
			this.loadmore = true;
			api.getLiveUserSetReward().then((res) => {
				this.tableData = res.data;
				this.loadmore = false;
			});
		},
		rollback(id) {
			uni.showModal({
				title: "提示",
				content: "确定要回滚吗？",
				success: (res) => {
					if (res.confirm) {
						api.getReGetMoney({ liveId: id }).then((res) => {
							uni.showToast({
								title: "回滚成功",
								icon: "none",
							});
							this.getTableData();
						});
					}
				},
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.search {
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	.input {
		flex: 1;
		margin: 0 20rpx;
		input {
			min-height: 70rpx;
		}
	}
	.btn {
		padding: 0 40rpx;
		margin: 10rpx 0;
		margin-right: 10rpx;
		color: #fff;
		height: 70rpx;
		background-color: #007aff;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.headingImg {
	width: 120rpx;
	height: 120rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.userInfo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
</style>
